<template>
    <div class="common-layout">
        <el-container>
        <el-header style="border-style: groove;border-width: 2px;height: 80px;">
            <el-breadcrumb :separator-icon="ArrowRight" style="float: left;margin-top: 30px;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
            </el-breadcrumb>
            <div style="margin-top: 20px;float: right;">
                <el-button @click="openMenuLogic('添加菜单',null)"  color="#916fd6" plain><el-icon><CirclePlus /></el-icon><span>添加菜单</span></el-button>
            </div>
        </el-header>
        <el-main style="border-style: groove;border-width: 2px;height: 600px; margin-top: 15px;">
            <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px;height: 500px;"
                row-key="id"
                border
                default-expand-all
                >
                <el-table-column fixed type="index" label="序号" width="60" />
                <el-table-column prop="menuName" label="菜单名称" width="200"/>
                <el-table-column prop="url" label="菜单Url"  width="180"/>
                <el-table-column prop="parentMenuName" label="父级菜单名称" width="120"/>
                <el-table-column prop="createUserName" label="创建人" />
                 <el-table-column prop="createTime" label="创建日期" width="200">
                <template v-slot="scoped">
                    <span>{{moment(scoped.row.createTime).format("YYYY-MM-DD HH:mm:ss")}}</span>
                </template>
                </el-table-column>
                <el-table-column prop="updateUserName" label="修改人" />
                <el-table-column prop="updateTime" label="修改日期" width="200">
                    <template v-slot="scoped">
                        <span v-if="scoped.row.updateTime!=null">{{moment(scoped.row.updateTime).format("YYYY-MM-DD HH:mm:ss")}}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="120">
                <template #default=scoped>
                    <el-button link type="primary" size="small" @click="openMenuLogic('修改菜单',scoped.row)">
                    修改
                    </el-button>
                    <el-button link type="primary" size="small" @click="open(scoped.row)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <div class="demo-pagination-block" style="margin-top: 20px;">
                <el-pagination
                v-model:current-page="page.PageIndex"
                v-model:page-size="page.PageSize"
                :page-sizes="[15, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.listcount"
                />
            </div>
        </el-main>
        </el-container>
    </div>

    <!-- 添加菜单对话框 -->
    <el-dialog v-model="menuLogic.opens" :title="menuLogic.titles" width="500" draggable align-center>
        <el-form :model="form">
        <el-form-item label="父级菜单" :label-width="formLabelWidth">
            <div class="m-4">
                <el-cascader v-model="form.pid" :options="menuData" :props="props1" clearable @change="handleChange"/>
            </div>
        </el-form-item>
        <el-form-item label="菜单名称" :label-width="formLabelWidth">
            <el-input v-model="form.menuName" autocomplete="off" placeholder="请输入菜单名称"/>
        </el-form-item>
        <el-form-item label="跳转的Url地址" :label-width="formLabelWidth">
            <el-input v-model="form.url" autocomplete="off"  placeholder="请输入跳转的Url地址"/>
        </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="menuLogic.opens = false">取消</el-button>
            <el-button type="primary" @click="addmenu">
            保存
            </el-button>
        </div>
        </template>
    </el-dialog>


</template>
<script lang="ts" setup>
import { readBasic, writeBasic } from '@/Helper/axiosSetting'
import { ArrowRight } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import moment from 'moment'
import { onMounted, reactive, ref, watch } from 'vue'
onMounted(()=>{
    getMenuList()
})

const tableData= ref([])
const page=reactive({
    PageIndex:1,
    PageSize:15,
    listcount:0
})
watch(page,()=>{
    getMenuList()
},{deep:true})

const getMenuList=()=>{
    readBasic.get("api/Menu/GetMenuList",{params:{
        PageIndex:page.PageIndex,
        PageSize:page.PageSize
    }}).then(res=>{
        tableData.value=res.data.data.list
        page.listcount=res.data.data.recordCount
    })
}



//级联属性
const props1 = {
  checkStrictly: true,
  emitPath:false
}

const handleChange = (value:any) => {
  console.log(value)
  console.log(form.pid)
}

//菜单下拉框接受实体
const menuData=ref([])
const getMenuData=()=>{
    readBasic.get("api/Menu/GetTree").then(res=>[
        menuData.value=res.data.data
    ])
}

const formLabelWidth = '110px'
//菜单实体
const form = reactive({
    id:0,
"menuName": "",
  "url": "",
  "pid": 0,
  "orderbyDesc": 0,
  "createTime": ""
})

const menuLogic=reactive({
    opens:false,
    titles:''
})
//打开对话框
const openMenuLogic=(name:string,row:any)=>{
    menuLogic.opens=true
    menuLogic.titles=name
    getMenuData()//调用级联菜单
    if(name=="添加菜单"){
        form.pid=0,
        form.menuName="",
        form.url=""
    }else{
        form.id=row.id,
        form.menuName=row.menuName,
        form.pid=row.pid,
        form.url=row.url,
        form.orderbyDesc=row.orderbyDesc
        form.createTime=row.createTime
    }
}





//添加/修改菜单
const addmenu=()=>{
    if(form.menuName==""){
        ElMessage.warning("菜单名称不能为空")
        return
    }
    if(form.url==""){
        ElMessage.warning("跳转的Url地址不能为空")
        return
    }
    if(menuLogic.titles=="添加菜单"){
        writeBasic.post("api/Menu/AddMeun",form).then(res=>{
        if(res.data.code==200){
            ElMessage.success(res.data.message);
            getMenuList()
            
            menuLogic.opens=false
        }else{
            ElMessage.error(res.data.message)
        }
    })
    }else{
        writeBasic.post("api/Menu/UpdateMenu",form).then(res=>{
        if(res.data.code==200){
            ElMessage.success("修改成功");
            getMenuList()
            menuLogic.opens=false
        }else{
            ElMessage.error("修改失败")
        }
    })
    }
}
//删除
const open = (row:any) => {
  ElMessageBox.confirm(
        '确定删除菜单吗?',
        '警告',
    {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
    }
  )
    .then(() => {
        writeBasic.post("api/Menu/RemoveMenu",row).then(res=>{
            if(res.data.code==200){
                ElMessage.success(res.data.message)
                getMenuList()
            }else{
                open2(row,res.data.message)
            }
        })
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
const open2 = (row:any,info:string) => {
  ElMessageBox.confirm(
        '【'+info+'】确定全部删除吗?',
        '警告',
    {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'primary',
        draggable: true,
        overflow: true,
    }
  )
    .then(() => {
        row.isDelete=true
        writeBasic.post("api/Menu/RemoveMenu",row).then(res=>{
            if(res.data.code==200){
                ElMessage.success(res.data.message)
                getMenuList()
            }else{
                ElMessage.error("删除失败")
            }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

</script>

